<template>
  <div class="page-index">
    <PageHeader title="选择费用类型"></PageHeader>
    <div class="search_box">
      <div class="search_input">
        <van-search v-model="value" placeholder="搜索费用类型" />
      </div>
      <div class="history_search">
        <div class="history_search_title">最近使用</div>
        <div class="history_search_value">
          <div
            class="history_search_value_name"
            v-for="(item, index) in list"
            :key="index"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="all_type">
      <div class="personal-expenses-title">全部类型</div>
      <div class="all_type_value">
        <van-tree-select
          :items="items"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
        />
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from "../../../src/components/header";
export default {
  data() {
    return {
      value: "",
      list: [
        { title: "年会及纪念活动" },
        { title: "快递及邮寄" },
        { title: "过路费" },
        { title: "退票/改签" },
        { title: "地铁/公交" },
        { title: "用餐" },
        { title: "停车费" },
        { title: "团建娱乐" },
      ],
      items: [
        {
          // 导航名称
          text: "差旅类",
          // 导航名称右上角徽标，2.5.6 版本开始支持
          // badge: 3,
          // 是否在导航名称右上角显示小红点
          // dot: true,
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "住宿",
              // id，作为匹配选中状态的标识符
              id: 1,
              // 禁用选项
            //   disabled: true,
            },
            {
              text: "飞机",
              id: 2,
            },
          ],
        },
           {
          // 导航名称
          text: "餐饮类",
          // 导航名称右上角徽标，2.5.6 版本开始支持
          // badge: 3,
          // 是否在导航名称右上角显示小红点
          // dot: true,
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "火锅",
              // id，作为匹配选中状态的标识符
              id: 1,
              // 禁用选项
            //   disabled: true,
            },
            {
              text: "烧烤",
              id: 2,
            },
          ],
        },
      ],
      activeId: 1,
      activeIndex: 0,
    };
  },
  components: {
    PageHeader,
  },
};
</script>
<style lang="scss" scoped>
body {
  background: rgba(245, 245, 245);
}
.search_box {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 8px rgb(238 238 238);
  padding-bottom: 10px;
  .history_search {
    padding-top: 12px;
    .history_search_title {
      color: rgba(153, 153, 153, 1);
      font-size: 12px;

      padding-left: 16px;
    }
    .history_search_value {
      display: flex;
      flex-wrap: wrap;

      margin: 12px 45px 0 12px;
      .history_search_value_name {
        color: rgba(51, 51, 51, 1);
        font-size: 12px;
        background: rgba(245, 245, 245, 1);
        border-radius: 2.42px;
        padding: 4px;
        margin: 2px;
      }
    }
  }
}
.all_type {
  background: rgba(255, 255, 255, 1);
  margin-top: 5px;
  .personal-expenses-title {
    margin: 12px 0px 16px 16px;
    border-left: 3px solid rgba(23, 119, 255, 1);
    font-size: 14px;
    line-height: 20px;
    padding-left: 5px;
    font-family: "SimHei";
  }
}
.van-sidebar-item--select::before {
  background: transparent;
}
</style>